import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./comments.module.css";
import { Button, Radio, Spin, Skeleton, Statistic } from "antd";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Tabs } from "antd";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "../../../redux/hooks";
import { getPlaylist, getUserDetail } from "../../../redux/userInfo/slice";
import { getsongList } from "../../../redux/list/slice";
import {
  CaretRightOutlined,
  DownloadOutlined,
  FolderAddOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";

const Comments = (props: any) => {
  const { TabPane } = Tabs;
  const { hotComments } = props;
  // const { playlist } = useSelector((s) => s.listDetail);
  // const { songList, privilegesSongs } = useSelector((s) => s.listDetail);
  const dispatch = useDispatch();

  // useEffect(() => {
  //   if (songList) {
  //     let list = songList["trackIds"].map((x) => x.id);

  //     dispatch(getsongList({ ids: list }));
  //   }
  // }, [songList]);

  function callback(key) {
    console.log(key);
  }
  const dsadsa = () => {
    // String, null, undefined, boolean, number, pject, symbol, bitint;
    console.log(22);
    let a = new Object();
    let b = new Number();
    let c = new Array();
    let d = true;
    // let d = new undefined();
    console.log(Object.prototype.toString.call(d));
  };
  return (
    <div className={styles.page}>
      {hotComments ? (
        <>
          <div onClick={dsadsa}>精彩评论</div>

          {hotComments.map((x) => {
            return (
              <div className={styles.commentItem}>
                <div className={styles.userAva}>
                  <img src={x.user["avatarUrl"]} alt="" />
                </div>

                <div className={styles.userinfo}>
                  <div className={styles.userinfoDetail}>
                    <div className={styles.name}>{x.user["nickname"]}</div>
                    <div className={styles.comment}>{x.content}</div>
                  </div>
                  <div className={styles.bottom}>
                    <div>{x.time}</div>
                    <div>点赞部分</div>
                  </div>
                </div>
              </div>
            );
          })}
        </>
      ) : (
        <>
          {" "}
          <div
            onClick={() => {
              console.log(hotComments);
            }}
          >
            2
          </div>
          <Skeleton />
        </>
      )}
    </div>
  );
};

export default Comments;
